.page-index {
		min-height: 100%;
		background: #F9F9F9;
		position: relative;
		
		/* 导航栏样式 */
		.nav-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			background-color: #ffffff;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}
		
		/* 筛选框样式 */
		.filter-box {
			display: flex;
			background-color: #ffffff;
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;
			.filter-item {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #666666;
				padding: 12rpx 0;
				border-bottom: 2px solid transparent;
				transition: all 0.3s ease;
				&.active {
					color: #1b6cfc;
					font-weight: bold;
					border-bottom-color: #1b6cfc;
				}
			}
		}
		
		/* 排序按钮样式 */
		.sort-box {
			background-color: #ffffff;
			padding: 20rpx 34rpx;
			margin-top: 11rpx;
			.sort-item {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 10rpx 0;
				text {
					font-size: 28rpx;
					color: #666666;
				}
				.sort-icon {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #1b6cfc;
				}
			}
		}
		
		/* 加载状态样式 */
		.loading-box {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50vh;
			.loading {
				font-size: 32rpx;
				color: #888888;
			}
		}
		
		/* 空状态样式 */
		.empty-box {
			margin-top: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.images {
				width: 281rpx;
				height: 262rpx;
			}
			.text {
				margin-top: 57rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
			.shop-btn {
				margin-top: 80rpx;
				padding: 20rpx 60rpx;
				background-color: #1b6cfc;
				color: #ffffff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 200rpx;
				text-align: center;
			}
		}
		
		/* 错误状态样式 */
		.error-box {
			margin-top: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.images {
				width: 281rpx;
				height: 262rpx;
			}
			.text {
				margin-top: 57rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
			.retry-btn {
				margin-top: 80rpx;
				padding: 20rpx 60rpx;
				background-color: #1b6cfc;
				color: #ffffff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 200rpx;
				text-align: center;
			}
		}
		.search{
			background: #fff;
			padding: 32rpx;
			.search-box{
				display: flex;
				justify-content: space-between;
				align-items:center;
				border: 2rpx solid #e6e6e6;
				border-radius: 16rpx;
				padding: 16rpx;
				.searchImage{
					width: 66rpx;
					height: 66rpx;
					flex-shrink: 0;
				}
				.searchInput{
					padding: 0 16rpx;
					width: 100%;
					height: 100%;
				}
			}
		}
		.list-box {
			background-color: #ffffff;
			margin-top: 11rpx;
			padding-left: 34rpx;

			.item-box {
				padding-top: 28rpx;
				display: flex;

				// align-items: center;
				.left-box {
					width: 168rpx;
					height: 168rpx;
					border-radius: 18rpx;
					padding-bottom: 28rpx;

					.left-img {
						background: #CD83B0;
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
					}
				}

				.right-box {
					width: 496rpx;
					margin-left: 23rpx;
					padding-bottom: 28rpx;
					border-bottom: 1px solid #EAEAEA;

					.name-box {
						display: flex;
						align-items: center;

						.name {
							font-size: 34rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #171717;
						}

						.status {
							margin-left: 12rpx;
							font-size: 17rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-style: italic;
							color: #F68062;
						}
					}

					.type-box {
						margin-top: 10rpx;
						.type-tag {
							display: inline-block;
							padding: 4rpx 16rpx;
							border-radius: 16rpx;
							font-size: 24rpx;
							color: #ffffff;
							background-color: #3B82EE;
						}
						.type-1 {
							background-color: #FF6B6B;
						}
						.type-2 {
							background-color: #4ECDC4;
						}
						.type-3 {
							background-color: #45B7D1;
						}
					}

					.phone-box {
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						.icon {
							width: 21rpx;
							height: 21rpx;
							background-color: #CD83B0;
						}

						.text {
							margin-left: 10rpx;
							font-size: 24.8rpx;
							color: #646368;
						}
					}

					.address {
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						.icon {
							width: 21rpx;
							height: 21rpx;
							background-color: #CD83B0;
						}

						.text {
							margin-left: 10rpx;
							font-size: 24.8rpx;
							color: #646368;
						}
					}
				}

				/* 订单金额样式 */
				.price-box {
					margin-top: 16rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
				.price-label {
					font-size: 28rpx;
					color: #646368;
				}
				.price-value {
					font-size: 32rpx;
					font-weight: bold;
					color: #FF6B6B;
					margin-left: 8rpx;
				}
			}
		}
	}
